<template>
  <el-dialog
    id="fsEditorDialog"
    :visible.sync="fullscreenVisible"
    :modal="false"
    v-if="fullscreenVisible"
    fullscreen="true"
    center="true"
    append-to-body
    custom-class="fullscreen-dialog"
  >
    <div
      id="fullscreenWindow"
      style="height:100%"
    />

    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="handleOk"
        type="primary"
      >
        {{ $t('m.weiyou_sure') }}
      </el-button>
      <el-button @click="fullscreenVisible = false">
        {{ $t('m.weiyou_close') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import getMaxZindex from '../../modules/microMail/util/getZindex';

export default {
  name: 'FullScreenEditor',
  components: {},
  props: {
    contents: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      fullscreenVisible: false,
      fullscreenUEditor: null,
    };
  },
  watch: {
    fullscreenVisible(nv) {
      if (nv) {
        this.$nextTick(() => {
          // 处理展示层级
          $('#fsEditorDialog').css({ 'z-index': getMaxZindex() + 1 });
          $('#fsEditorDialog .el-dialog__body').css({ height: `${$('#fsEditorDialog').height() - 100}px` });
          $('#fullscreenWindow').css({ height: `${$('#fsEditorDialog').height() - 200}px` });
          this.initEditor();
        });
      } else {
        this.fullscreenUEditor.destroy();
      }
    },
  },
  methods: {
    initEditor() {
      // 富文本编辑器
      const editorCfg = {
        autoHeightEnabled: false,
        enableAutoSave: false,
        allowDivTransToP: false, // 阻止div标签自动转换为p标签
        toolbars: [[
          'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch',
          'autotypeset', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
          'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
          'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
          'simpleupload', 'insertimage', 'emotion', 'insertvideo', 'music', 'attachment', 'map', 'insertframe',
          'insertcode', 'webapp', 'pagebreak', '_template', 'background', 'formdesign', '|',
          'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
          'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol',
          'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'edittable', 'edittd', 'aligntd', '|',
          'print', 'preview', 'searchreplace', 'help', 'source', 'fullscreen',
        ]],
        // 关闭字数统计
        wordCount: false,
        maximumWords: 100000000000000,
        // 关闭elementPath
        elementPathEnabled: false,
      };
      this.fullscreenUEditor = UE.getEditor('fullscreenWindow', editorCfg);

      this.fullscreenUEditor.ready(() => {
        // 处理编辑器toolbar下拉选择  被遮挡的问题
        $('#fullscreenWindow .edui-editor').css({ 'z-index': getMaxZindex() + 1 });
        // 桌面端图片链接处理
        this.contents = JE.buildUeditorImgUrl(this.contents);
        this.fullscreenUEditor.setContent(this.contents);
        this.fullscreenUEditor.focus();
      });
    },
    // 确定
    handleOk() {
      this.fullscreenVisible = false;
      this.$emit('finishInput', this.fullscreenUEditor && this.fullscreenUEditor.getContent());
    },
  },
};
</script>

<style lang="scss">
.fullscreen-dialog {
  .el-button--primary {
    background-color: #386ad0;
    border-color: #386ad0;
  }
  .el-button--primary:hover {
    background-color: #409eff;
    border-color: #409eff;
  }
}
</style>
